<template>
  <view class="container">
    <view class="register-card">
      <view class="title">注册</view>
      
      <view class="form-group">
        <input 
          class="input" 
          v-model="username"
          placeholder="请输入用户名"
          type="text"
        />
      </view>
      
      <view class="form-group">
        <input 
          class="input"
          v-model="password" 
          type="password" 
          placeholder="请设置密码" 
        />
      </view>
      
      <view class="form-group">
        <input 
          class="input" 
          v-model="repassword" 
          type="password" 
          placeholder="请确认密码" 
        />
      </view>
	  
	  <view class="form-group">
	    <input 
	      class="input" 
	      v-model="nickname" 
	      type="text" 
	      placeholder="昵称" 
	    />
	  </view>
	  
	  <view class="form-group">
	    <input 
	      class="input" 
	      v-model="mobile" 
	      type="number" 
	      placeholder="手机号" 
	    />
	  </view>
      
	  <view class="form-group">
	    <input 
	      class="input" 
	      v-model="email" 
	      type="text" 
	      placeholder="Email" 
	    />
	  </view>
	  
      <button 
        class="submit-btn" 
        type="primary" 
        @click="register"
      >
        注册
      </button>
      <navigator url="/pages/login/login" class="link">已有账号？立即登录</navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",  
      password: "",  
      repassword: "",
      nickname: "",  
      mobile: "",    
      email: ""
    }; 
  },
  methods: {
    register() {
      
      if (!this.username) {
        uni.showToast({
          title: "请输入用户名",
          icon: "none",          
          duration: 2000         
        });
        return; 
      }

      const usernameReg = /^[a-zA-Z0-9_]{3,12}$/;
      if (!usernameReg.test(this.username)) {
        uni.showToast({
          title: "用户名需3-12位，仅支持字母、数字、下划线",
          icon: "none",
          duration: 2000
        });
        return;
      }

      
      if (!this.password) {
        uni.showToast({
          title: "请设置密码",
          icon: "none",
          duration: 2000
        });
        return;
      }

      if (this.password.length < 6) {
        uni.showToast({
          title: "密码长度不能少于6位",
          icon: "none",
          duration: 2000
        });
        return;
      }

      if (this.password !== this.repassword) {
        uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
          duration: 2000
        });
        return;
      }
	  
    
      if (!this.nickname) {
        uni.showToast({ title: "请输入昵称", icon: "none", duration: 2000 });
        return;
      }
     
      
      if (this.mobile && !/^1[3-9]\d{9}$/.test(this.mobile)) {
        uni.showToast({ title: "请输入正确的手机号", icon: "none", duration: 2000 });
        return;
      }
	        
    
      if (this.email && !/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(this.email)) {
        uni.showToast({ title: "请输入正确的邮箱", icon: "none", duration: 2000 });
        return;
      }

      uni.showLoading({ title: "注册中..." });
      
      
      uniCloud.callFunction({
        name: 'addUser', 
        data: {
          name: this.username,  
          password: this.password,
          nickname: this.nickname,
          mobile: this.mobile,    
          email: this.email
        },
        success: (msg) => {
          console.log("addUser callback " + JSON.stringify(msg));
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast({
              title: '注册成功',
              icon: 'success',
              duration: 2000
            });
            uni.redirectTo({ url: "/pages/login/login" });
          }, 1000)
        },
        fail: (error) => {
          uni.hideLoading();
          console.error("addUser fail " + error);
          uni.showToast({
            title: "注册失败，请重试",
            icon: "none",
            duration: 2000
          });
        }
      });
    }
  }
}; 
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f7f7f7;
}
.register-card {
  width: 85%;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.form-group {
  margin-bottom: 30rpx;
}
.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.submit-btn {
  width: 100%;
  border-radius: 8rpx;
}
.link {
  display: block;
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #007AFF;
}
</style>